<script setup lang="ts">
import { computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { Layout } from '/@/components/Layout';

const route = useRoute();
console.log('route', route.path);

const isLayoutVisible = computed(() => !['/', '/login'].includes(route.path));
</script>

<!-- <template>
  <Layout v-if="!['/', '/login'].includes(route.path)">
    <router-view v-slot="{ Component, route }">
      <keep-alive>
        <div v-show="$route.meta.keepAlive">
          <component :is="Component" :key="$route.name"></component>
        </div>
      </keep-alive>
      <div v-show="!$route.meta.keepAlive">
        <component :is="Component" :key="$route.name"></component>
      </div>
    </router-view>
  </Layout>
  <router-view v-else></router-view>
</template> -->

<template>
  <Layout v-if="isLayoutVisible">
    <router-view v-slot="{ Component, route }">
      <component :is="Component" :key="route.name">
        <keep-alive v-if="route.meta.keepAlive">
          <component :is="Component" />
        </keep-alive>
        <component v-else :is="Component" />
      </component>
    </router-view>
  </Layout>
  <router-view v-else></router-view>
</template>

<style lang="scss">
/* 让元素内边距padding和外边距margin和边框border不超过宽高 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 去掉边框 */
img {
  border: 0;
}

/* 去掉无序列表前面的小点 */
ul,
ol,
li {
  list-style: none;
}

input {
  padding-top: 0;
  padding-bottom: 0;
  border: none;
}

/* 去掉a标签的下划线 */
a {
  text-decoration: none;
}
</style>
